
.tile { 
    width: 100%;
    height: 100%;
    background-color: #eeeeee; 
    display: inline-block; 
    position: relative; 
    cursor: pointer; 
    transition: all 0.4s ease-out; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.tile .tu { 
    height: 100%; 
    width: 100%;
    position: absolute;
    top: 30px; 
    left: 100px; 
    z-index: 0; 
    transition: all 0.4s ease-out;
 }
.tile .text { 
    z-index: 99; 
    width: 100%;
    height: 188px;
 }
.infosd>img{
    width: 19px;
    height: 13px;
    cursor: pointer;
    margin-left: 70px;
}
.tile h1 { 
    font-weight: 100; 
    width:70%;
    transform: translateY(-200px); 
    margin: 0 auto;
    font-size: 18px;
    color: #FFFFFF;
    margin-top: 50px;
    font-weight: bold;
}
.tile .infosd { 
    transform: translateY(100px); 
    display: inline-block;
    margin: 0 auto;
    color: #FFFFFF;
    font-weight: normal;
    font-size: 14px;
    width: 70%;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    align-items: center;
}
.infosd>h2{
    margin: 0;
    width: 80%;
    font-weight: normal;
    font-size: 14px;
}
.tile p { 
    line-height: 25px; 
    transform: translateY(100px); 
    transition-delay: 0.2s; 
    margin: 0 auto;
    color: #FFFFFF;
    font-size: 14px;
    width: 70%;
    margin: 0 auto;
    margin-top: 20px;
}
.animate-text { 
    opacity: 0; 
    transition: all 0.6s ease-in-out; 
}
.tile:hover { 
    transform: scale(1); 
    background: #2D5BC3;
}
.tile:hover .tu { 
    opacity: 0; 
}
.tile:hover .animate-text { 
    transform: translateX(0);
    opacity: 1; 
}